
<template>
  <!-- 3.满足静态结构 -->
  <div class="swiper-container" :id="id">
    <div class="swiper-wrapper">
      <slot></slot>
    </div>
  </div>
</template>

<script>
// 2.引入Swiper
import Swiper from "swiper";
export default {
  name: "myswiper",
  props: {
    id: {
      type: String,
      befault: "sbox",
    },
    options: {
      type: Object,
      default: {
        observer: true,
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
    },
  },
  mounted() {
    // 4.实例化Swiper
    var mySwiper = new Swiper("#" + this.id, this.options);
  },
};
</script>